<template>
    <div>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="角色名称" align="center" />
            <el-table-column prop="desc" label="说明" align="center" />
            <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" @click="handleClick">修改</el-button>
                    <el-button type="primary" @click="openPower(scope.row.id)">授权</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="Pagination">
            <Pagination :data="pagination" @setlm="getlm" @setpg="getpg"></Pagination>
        </div>
        <el-drawer v-model="power" direction="rtl">
            <template #header>
                <h4>权限配置</h4>
            </template>
            <template #default>
                <div class="custom-tree-container">
                    <el-tree v-loading="Loading" element-loading-text="正在查询中" ref="treeRef" :data="dataSource" show-checkbox
                        node-key="id" default-expand-all :expand-on-click-node="false">
                        <template #default="{ node, data }">
                            <span class="custom-tree-node">
                                <span>{{ node.label }}</span>
                                <span v-if="!data.children">{{ data.id }}</span>
                            </span>
                        </template>
                    </el-tree>
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确认</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
  
<script lang="ts" setup>
import type { IBackStatus } from "#/index";
import { get, post } from '@/utils/https'
import { onMounted, reactive, ref, nextTick, computed, watch } from 'vue'
import Pagination from '../../components/Pagination/Pagination.vue'//分页组件
// import type Node from 'element-plus/lib/components/tree/src/model/node'

interface Tree {
    id: number
    label: string
    children?: Tree[]
}

let rId = ref(0)

let dataSource = reactive<Tree[]>([])
let Loading = ref(false)

let treeRef = ref()
let pages = computed(() => Math.ceil(pagination.count / pagination.limit))//最大页数
// 初始化数据
let tableData: TypeLog[] = reactive([]) //表格数据
// 分页绑定数据
let pagination = reactive({
    page: 1,
    limit: 10,
    count: 0
})
let power = ref(false)

const openPower = (id: number) => {
    power.value = true
    Loading.value = true
    rId.value = id
    // console.log(id, 'id');
    let data = {
        _gp: 'admin.role',
        _mt: 'permissionList',
        roleId: id,
    }
    get(data).then((res) => {
        console.log('角色权限列表获取数据成功', res)
        const { systemPermissions, assignedPermissions } = res.data
        dataSource.length = 0
        dataSource = systemPermissions
        treeRef.value.setCheckedKeys(assignedPermissions)

        if (treeRef.value.setCheckedKeys(assignedPermissions) == undefined) {
            setTimeout(() => {
                Loading.value = false
            }, 200);
        }
    })
}
function cancelClick() {
    power.value = false
}
function confirmClick() {
    console.log(treeRef.value.getCheckedKeys(true), ' treeRef.value.getCheckedKeys(true)');

    let data = {
        _gp: 'admin.role',
        _mt: 'permissionSet',
        // tree.value.getCheckedKeys:如果参数是 true, 它只返回当前选择的子节点数组。
        roleSetPermissionDTO: JSON.stringify({
            roleId: rId.value, permissions: treeRef.value.getCheckedKeys(true)
        })
    }
    post(data).then((res) => {
        console.log('权限设置成功', res)
    }).catch(err => {
        console.log(err);
    })

    power.value = false
    getInit()
}





const handleClick = () => {
    console.log('click')
}
/**
 * 分页自定义事件
 */
const getlm = (v: IBackStatus) => {
    pagination.limit = v.backStatus
}
const getpg = (v: IBackStatus) => {
    pagination.page = v.backStatus
}

// 获取初始化数据
let getInit = () => {
    let data = {
        _gp: 'admin.role',
        _mt: 'list',
        page: pagination.page,
        limit: pagination.limit,
        adminId: null,
        name: null
    }
    get(data).then((res) => {
        // console.log('角色列表获取数据成功', res)
        tableData.length = 0
        tableData.push(...res.data.items)
        pagination.count = res.data.count
    })
}
onMounted(() => {
    getInit()
})

// 解决分页请求两次问题
watch([() => pagination.limit, () => pagination.page], (values, oldValues) => {
    if (pagination.page <= pages.value) {
        getInit()
    }
})
</script>
<style scoped lang="less"> .custom-tree-node {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 14px;
     padding-right: 8px;
 }
</style>